import React, { useRef } from 'react'

export default function Ball() {
    const box = useRef(null)

    // 定义小球开启动画
    const create = (a) => {
        // 获取当前内容距离浏览器显示区域的宽高
        const { clientX, clientY } = a
        // 为小球创建一个div元素
        const ball = document.createElement('div')
        // 设位置为绝对定位
        ball.style.position="absolute"
        // 设初始位置
        // x轴-10px
        // y轴-10px
        ball.style.left = clientX - 10 + 'px'
        ball.style.top = clientY - 10 + 'px'
        // 设小球盒子宽高
        ball.style.width = "20px"
        ball.style.height = "20px"
        // 将div设为圆角，以变成小球
        ball.style.borderRadius = "50%"
        // 设背景色为浅青色
        ball.style.backgroundColor = "aqua"
        // 设置小球变化，利用transition第一个参数：位置，时间，动画效果
        ball.style.transition = 'left .6s linear,top .6s linear'
        document.body.appendChild(ball)
        console.log(ball)
        // 使用 requestAnimationFrame 替代 setTimeout
        requestAnimationFrame(() => {
            console.log(box.current.offsetLeft)
            ball.style.left = box.current.offsetLeft + box.current.offsetWidth / 2 + "px"
            ball.style.top = box.current.offsetTop + "px"
        })
        // 变化结束时将小球元素移除
        ball.ontransitionend = function () {
            ball.remove()
        }
    }
    return (
        <div>
            <button ref={box}>购物车</button>
            <button onClick={(a) => { create(a) }} style={{ margin: "200px", width: "100px" }}>加入购物车</button>
            <button onClick={(a) => { create(a) }} style={{ margin: "30px", width: "100px" }}>加入购物车2</button>
            <button onClick={(a) => { create(a) }} style={{ margin: "60px", width: "100px" }}>加入购物车3</button>
        </div>
    )
}
